<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/youyi.css"/>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../css/environmental.css"/>
    <title>发布需求</title>   
</head>
<body>
	<header class="mui-bar mui-bar-nav top_nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left detail_left"></a>
		<h1 id="title" class="mui-title">发布需求</h1>
		<!--<a id="info" class="mui-icon iconfont icon-caidan mui-pull-right"></a>-->
	</header>
	<div class="mui-content">
			<div class="mui-scroll-wrapper">
			    <div class="mui-scroll">
			        <div class="item_box rel_req">
						<h2 class="mui-table-view-cell index_title">
							<a class="mui-active"><b>发布环保需求</b><!--<span class="mui-badge see_more">更多</span>--></a>
						</h2>
						<h6 class="waring_bar"><marquee scrollamount="3">优蚁将会为你全程跟踪服务！</marquee></h6>
						<div class="item_list_box rel_req_list">
							<ul class="mui-table-view-radio">
								<li class="active">
									<a class="mui-navigate-right">
										环评编写
									</a>
								</li>
								<li class="">
									<a class="mui-navigate-right">
										环保工程
									</a>
								</li>
								<li class="">
									<a class="mui-navigate-right">
										项目验收
									</a>
								</li>
								<li class="">
									<a class="mui-navigate-right">
										环境监测
									</a>
								</li>
								<li class="">
									<a class="mui-navigate-right">
										危废服务
									</a>
								</li>
								<li class="">
									<a class="mui-navigate-right">
										应急预案
									</a>
								</li>
								<li class="">
									<a class="mui-navigate-right">
										清洁生产
									</a>
								</li>
								<li class="">
									<a class="mui-navigate-right">
										节能改造
									</a>
								</li>
								<li class="">
									<a class="mui-navigate-right">
										其他需求
									</a>
								</li>
							</ul>
							<div class="rel_form">
								<div class="mui-input-row rel_textarea" style="margin: 10px 5px;">
									<textarea id="textarea" rows="5" placeholder="请描述您的环保需求（选填）"></textarea>
									<p class="mui-text-right card_zf"><b class="mui-badge-inverted mui-badge-red">0</b>/<span>120</span></p>
								</div>
								<div class="form_item you_name">
									<label for=""><span class="iconfont icon-lianxiren"></span><b>您的姓名：</b><input type="text" placeholder="章子怡" /></label>						
								</div>
								<div class="form_item you_phone">
									<label for=""><span class="iconfont icon-shouji"></span><b>您的手机：</b><input type="text" placeholder="请输入联系电话" /></label>						
								</div>
								<div class="form_item you_yzm">
									<label for=""><span class="iconfont icon-yanzhengma"></span><b>验证码：</b><input type="text" placeholder="验证码" class="yzm" /> <span class="send_yzm">获取验证码</span></label>						
								</div>
								<div class="form_item you_company">
									<label for=""><span class="iconfont icon-icon"></span><b>公司名称：</b><input type="text" placeholder="请输入公司名称" /></label>						
								</div>
								<div class="form_item you_location">
									<label for=""><span class="iconfont icon-dizhi"></span><b>位置定位：</b><input type="text" placeholder="定位" /></label>						
								</div>
							</div>
							<div class="form_bar_btn">
								<a href="demand_details.html" class="mui-btn mui-btn-block mui-btn-green">提交</a>
							</div>
						</div>
					</div>
			    </div>
			</div>			
	</div>
<script src="../js/mui.min.js"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZM5FnhEj8ZddP3FpGLM85lPFFVvj1Lgr"></script>
<script>
var jq=$.noConflict();
mui.init();
(function($) {
	//阻尼系数
	var deceleration = mui.os.ios?0.003:0.0009;
	$('.mui-scroll-wrapper').scroll({
	bounce: false,
	indicators: true, //是否显示滚动条
		deceleration:deceleration
	});
	
	//选择需求
	$(".rel_req_list").on("tap","li",function(){
	jq(this).addClass("active").siblings().removeClass("active");
		});
	//验证码
	$(".you_yzm").on("tap",".send_yzm",function(e){
			defaule=jq(this);
			time(e,jq(this),time.wait);
		});
	//提交
	document.querySelector(".form_bar_btn a").addEventListener("tap",function(e){
		sureSubmit(e);
	});
})(mui);



//验证码发送时间
var defaule;
time.wait=10;  
function time(e,defaule,waitTime) {
    if (time.wait == 0) {
		mui(".you_yzm").off("tap").on("tap",".send_yzm",function(e){
		time(e,defaule,time.wait);
		});
        defaule.text("获取验证码");
        time.wait = 10;  
    } else {
		mui(".you_yzm").off("tap");
        defaule.text("重发(" + time.wait + ")");
        time.wait--;
        setTimeout(function() {
            time(e,defaule,time.wait);
        },
        1000); 
    }  
};

//验证手机号
var checkPhone=function (phone) {
return (/^1\d{10}$/.test(phone));
};

//确认申请
var sureSubmit=function(e){
	var appJson={};
	var you_name=jq.trim(jq(".you_name input").val());
	var you_phone=jq.trim(jq(".you_phone input").val());
	var you_yzm=jq.trim(jq(".you_yzm input").val());	
	var you_company=jq.trim(jq(".you_company input").val());
	
	if(you_name!="" && you_phone!="" &&you_yzm!="" && you_company!=""){		
		if(!checkPhone(you_phone)){
			mui.toast("手机号不正确！")
			return false;
		};
		appJson.you_name=you_name;
		appJson.you_phone=you_phone;
		appJson.you_yzm=you_yzm;		
		appJson.you_company=you_company;
		console.log(JSON.stringify(appJson));
	}else{
		e.preventDefault();
		mui.toast("内容填写不全！");
	};
	
};

//定位
window.onload=function(){
	//经纬度
	var lon=null;
	var lat=null;
	
	var map = new BMap.Map("allmap");
	var point = null;
	var gc = new BMap.Geocoder();
	var adres=null;
	var mycity=null;
		textSpan=document.querySelector(".you_location input");
		navigator.geolocation.getCurrentPosition(function(clbck){
 		lon=clbck.coords.longitude;
 		lat=clbck.coords.latitude;
 		point = new BMap.Point(lon,lat);
 		geobackFn();
    });
    
    var geobackFn=function(){
    	gc.getLocation(point, function(rs){
		   var addComp = rs.addressComponents;
		   	   mycity=addComp.city;
		   	   adres=addComp.province + " " + addComp.city + "" + addComp.district + "" + addComp.street +"" + addComp.streetNumber;
		   	   console.log(adres);
		   	   textSpan.value=adres;
				});
    };
};
//限制字数
var card=document.querySelector('.card_zf span').innerHTML;
	card=parseInt(card);
	document.addEventListener("keyup",function(){
	var spanB=document.querySelector('.card_zf b');
	var areas=document.querySelector('.rel_textarea textarea');
	var areasVal=areas.value;
	var areasLenth=areasVal.length;
	
	if(areasLenth>=card){
		var newValue=areasVal.substr(0,card);
		areas.value=newValue;
		spanB.className='mui-badge-inverted mui-badge-red';
		spanB.innerHTML=card;
	}else{
		spanB.className='mui-badge-inverted';
		spanB.innerHTML=areasLenth;
	};  		
});
</script>
</body>
</html>